<template>
    <view :style="{ '--color': color }" v-if="pageData">
        <status-bar :title="title" :goHome="fromShare"></status-bar>
        <!--  <u-navbar :title="title" :autoBack="true" placeholder></u-navbar> -->

        <view class="Wrapper">
            <view class="row a-center">
                <text class="flex-1 black size30 bold500">设备号：{{ device_code }}</text>
                <text class="color_ff4 size28 m-left20">状态：{{ pageData.statusName }}</text>
            </view>
            <view class="color_33 size28 m-top12">放置位置：{{ pageData.address }}</view>
            <view class="row a-center m-top12">
                <text class="flex-1 color_33 size28">客服电话：{{ pageData.service_tel }}</text>
                <text class="color_33 size28 m-left20" @click="toUrl(`record`)">运行记录</text>
            </view>
            <view class="rows size30 m-top12" v-if="pageData.free_times">{{ pageData.free_times_words }}：{{ pageData.free_times }}</view>
        </view>

        <view class="Box" v-if="pageData.orderno">
            <view class="flex-1 d-flex f-column">
                <text class="color_33 size28">{{ pageData.orderno }}</text>
                <text class="color_33 size28 m-top10">创建时间：{{ pageData.start_time }}</text>
            </view>
            <text class="black size32 bold500 m-left20">{{ pageData.statusName }}</text>
        </view>

        <view class="launch" @click="launch" v-if="stateTxt">
            <text class="white size42 bold500">{{ stateTxt }}</text>
            <text class="last_time" v-if="pageData.last_time && pageData.last_time > 0">{{ pageData.last_time }}</text>
        </view>

        <emptys v-else :title="`设备${pageData.statusName}`"></emptys>

        <view class="Termination" v-if="pageData.running == 3001" @click="shopDevice">终止设备</view>
        <showModel @cancelFunc="showModal = false" goHome="0" v-if="showModal" type="2"></showModel>
    </view>
</template>

<script>
    /*
		case 3001:
		    $res['statusName']='运行中';
		    break;
		case 3002:
		    $res['statusName']='暂停';
		    break;
		case 3003:
		    $res['statusName']='空闲';
		    break;
		case 3004:
		    $res['statusName']='复位';
		    break;
		case 3005:
		    $res['statusName']='故障';
		    break;
		default:
		    $res['statusName']='空闲';
		    break;
	*/
    import { mapState } from 'vuex';
    export default {
        data() {
            return {
                fromShare: 0,
                showModal: false,
                title: '设备信息',
                device_code: '', // 01A250609W014
                pageData: '',
                downTime: null,
                lastTime: 0
            };
        },
        onLoad(opt) {
            if (opt.device_code) this.device_code = opt.device_code;
            if (opt.fromShare) this.fromShare = opt.fromShare;
            this.deviceDetail();
        },
        onShow() {
            if (this.downTime != null) clearInterval(this.downTime);
            this.showTime();
        },
        // onShow() {
        //     let options = wx.getEnterOptionsSync();
        //     if (options.scene == '1038' && options.referrerInfo.appId == 'wxfb90d262fc1e620d') {
        //         let extraData = options.referrerInfo.extraData;
        //         if (!extraData) return;
        //         if (extraData.code == 'success') {
        //             this.deviceDetail();
        //         } else {
        //             this.deviceDetail();
        //         }
        //     }
        // },
        methods: {
            deviceDetail() {
                this.$http
                    .get({
                        url: '/singleSaleItoApi/deviceDetail',
                        data: {
                            device_code: this.device_code
                        }
                    })
                    .then((res) => {
                        if (res.code != 200) return this.$Toast(res.msg);
                        const result = res.data;
                        // result.last_time = 100;
                        // if (result.last_time && result.last_time > 0 && result.running == 3001) this.showTime();
                        this.pageData = result;
                    });
            },
            showTime() {
                if (this.downTime != null) return;
                this.downTime = setInterval(() => {
                    this.deviceDetail();
                }, 1000);
            },
            // showTime() {
            //     this.downTime = setInterval(() => {
            //         if (this.pageData.last_time > 0) {
            //             this.pageData.last_time--;
            //         } else {
            //             clearInterval(this.downTime);
            //             this.deviceDetail();
            //         }
            //     }, 1000);
            // },
            async launch() {
                if (!this.vid) return (this.showModal = true);
                if (this.pageData.running == 3003) return this.getDevicePayInfo();
                let content;
                let action;
                if (this.pageData.running == 3001) {
                    content = '是否确定暂停设备';
                    action = 'pause';
                }
                if (this.pageData.running == 3002) {
                    content = '是否确定重启设备';
                    action = 'restart';
                }
                const result = await this.$Modals('提示', content);
                if (!result) return;
                this.shopControlDevice(action);
            },

            async shopDevice() {
                const result = await this.$Modals('提示', '是否确定终止设备');
                if (!result) return;
                this.shopControlDevice('stop');
            },

            shopControlDevice(action) {
                if (!this.vid) return (this.showModal = true);
                let Tips = '操作中';
                if (action == 'pause') Tips = '暂停设备中~';
                if (action == 'restart') Tips = '重启设备中~';
                if (action == 'stop') Tips = '终止设备中~';
                this.$showLoading(Tips);
                this.$http
                    .post({
                        url: '/singleSaleItoApi/shopControlDevice',
                        data: {
                            orderno: this.pageData.orderno,
                            action
                        }
                    })
                    .then((res) => {
                        this.$hideLoading();
                        if (res.code != 200) return this.$Toast(res.msg);
                        this.$Toast(res.msg);
                        this.deviceDetail();
                        this.$showLoading(Tips);
                        setTimeout(() => {
                            this.deviceDetail();
                            this.$hideLoading();
                        }, 3500);
                    });
            },
            getDevicePayInfo() {
                this.$showLoading(' ');
                this.$http
                    .get({
                        url: '/accountPay/getDevicePayInfo',
                        data: {
                            device_code: this.device_code
                        }
                    })
                    .then((res) => {
                        this.$hideLoading();
                        if (res.code == 200) return this.$Toast(res.msg);
                        if (res.code != 100) return this.$Toast(res.msg);
                        const result = res.data;
                        if (result.extraData) {
                            wx.openEmbeddedMiniProgram({
                                appId: result.appId,
                                extraData: result.extraData
                            });
                        } else {
                            uni.getProvider({
                                service: 'oauth',
                                success: function (resp) {
                                    if (resp.provider) {
                                        uni.requestPayment({
                                            provider: resp.provider[0],
                                            orderInfo: result,
                                            timeStamp: result.timeStamp,
                                            nonceStr: result.nonceStr,
                                            package: result.package,
                                            signType: result.signType,
                                            paySign: result.paySign,
                                            success: () => {
                                                // this.deviceDetail();
                                            },
                                            fail: () => {
                                                // this.deviceDetail();
                                            },
                                            complete() {
                                                console.log('1');
                                                // this.deviceDetail();
                                            }
                                        });
                                    }
                                }
                            });
                        }
                    });
            }
        },
        onHide() {
            clearInterval(this.downTime);
            this.downTime = null;
        },
        onUnload() {
            clearInterval(this.downTime);
            this.downTime = null;
        },
        computed: {
            ...mapState(['color', 'vid']),
            stateTxt() {
                if (!this.pageData) return;
                if (this.pageData.running == 3001) return '暂停设备';
                if (this.pageData.running == 3002) return '重启设备';
                if (this.pageData.running == 3003) return '启动设备';
                if (this.pageData.running == 3004) return '复位';
                if (this.pageData.running == 3005) return '故障';
                // if (this.pageData.running == 0000) return this.pageData.statusName;
            }
        }
    };
</script>

<style lang="scss" scoped>
    .Termination {
        width: 300rpx;
        height: 80rpx;
        background-color: #ccc;
        color: #333;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 30rpx auto 0;
        border-radius: 10rpx;
        font-size: 30rpx;
        font-weight: 500;
    }
    .Wrapper {
        width: 710rpx;
        padding: 30rpx 24rpx;
        margin: 40rpx auto;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7rpx 29rpx 0px;
        border-radius: 10rpx;
        display: flex;
        flex-direction: column;
    }
    .Box {
        width: 650rpx;
        padding: 24rpx;
        border: 1px solid #ccc;
        border-radius: 10rpx;
        margin: 0 auto;
        display: flex;
        align-items: center;
    }
    .launch {
        width: 300rpx;
        height: 300rpx;
        border-radius: 50%;
        border: 1px solid var(--color);
        margin: 100rpx auto 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: var(--color);
        color: #fff;
        .last_time {
            color: #fff;
            font-size: 36rpx;
            margin-top: 20rpx;
        }
    }
</style>
